<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#fff' }">
			<view class="slot-wrap flex align-center">
				<text class="cuIcon-back" @click="Back"></text>
				我的课程
			</view>
		</u-navbar>
		<!-- #ifdef H5 -->
		<u-sticky index='1' :offset-top="0" :enable="enable">
			<!-- #endif -->
			<!-- #ifndef  H5 -->
			<u-sticky index='1' :offset-top="offsetTop" h5-nav-height="44" :enable="enable">
				<!-- #endif -->
				<u-tabs :list="list" active-color="#CC0001" bar-height="4" :bold="false" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
			</u-sticky>
			<view class="main">
				<view class="u-flex">
					<view class="banren">
						<image src="../../static/images/banren.png" mode="aspectFill"></image>
					</view>
					<view class="">
						<view class="u-font-30">
							鲁小班课程介绍
						</view>
						<view class="u-font-24">
							时长09:59:59
						</view>
					</view>
				</view>
				<view class="u-flex">
					<view class="banren">
						<image src="../../static/images/banren.png" mode="aspectFill"></image>
					</view>
					<view class="">
						<view class="u-font-30">
							鲁小班课程介绍
						</view>
						<view class="u-font-24">
							时长09:59:59
						</view>
					</view>
				</view>
			</view>

			<!-- <video id="myVideo" class="myVideo"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
				
				:direction="-90"
				controls @fullscreenchange="fullscreenchange"></video> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				enable: true,
				offsetTop: 0,

				list: [{
					name: '已学'
				}, {
					name: '未学'
				}],
				current: 0,


				videoContext: false,
				// showFullBtn:false,//是否显示video控制条全屏按钮
			}
		},
		onLoad() {

		},
		onShow() {
			this.setOffestTop()
		},
		// onReady: function (res) {
		//     // 获取 video 上下文 videoContext 对象
		//     this.videoContext = uni.createVideoContext('myVideo');
		//     // 进入全屏状态
		//     this.videoContext.requestFullScreen();
		// },
		methods: {
			// 适配吸顶tab高度
			setOffestTop() {
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				console.log(this.offsetTop)
			},
			Back() {
				uni.navigateBack({});
			},
			change(index) {
				this.current = index;
			},
			gonzhivideo() {
				this.videoContext = !this.videoContext
				
				// 获取 video 上下文 videoContext 对象
				this.showFullBtn = uni.createVideoContext('myVideo');
				// 进入全屏状态
				this.showFullBtn.play()
				this.showFullBtn.requestFullScreen({});

			},
			fullscreenchange(event){
				console.log(event.detail)
			}
		}
	}
</script>

<style lang="scss">
	.banren {
		margin-right: 30rpx;

		image {
			width: 335rpx;
			height: 250rpx;
			border-radius: 15rpx;
		}
	}

	.main {
		padding: 65rpx 25rpx;

		.u-flex {
			margin-bottom: 35rpx;

			.u-font-30 {
				color: #333333;
			}

			.u-font-24 {
				margin-top: 30rpx;
				color: #666;
			}
		}

	}
</style>
